<template>
  <div @click="div">
    <a @click="fn" href="https://www.baidu.com">去百度</a><br />
    <a @click="fn2(100, $event)" href="https://www.baidu.com">去百度</a><br />
    <!-- 事件修饰符 -->
    <!-- @事件类型.修饰符="事件处理函数" -->
    <a @click.stop.prevent="fn3" href="https://www.baidu.com">去百度</a><br />
    <!-- @事件类型.prevent 只阻止默认行为 -->
    <a @click.prevent href="https://www.baidu.com">去百度</a><br />
    <!-- 
      最常用的两个修饰符:
      .prevent 阻止默认行为
      .stop 阻止冒泡
      修饰符是可以串联的, .prevent.stop 表示既阻止默认行为也阻止冒泡
     -->
    <button @click.stop="btn">点我阻止冒泡</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    fn(e) {
      // 获取事件对象
      // 无传参: 默认有一个参数 e
      console.log("做一些事情, 不要去百度了");
      e.preventDefault();
    },
    fn2(num, e) {
      // 有传参: e 就会被顶掉, 没有 e 了, 需要手动传入 $event 实参
      console.log(num);
      e.preventDefault();
    },
    fn3() {
      // 没有阻止默认行为
      console.log("我要做事情");
    },
    btn() {
      console.log("按钮被点了");
      // e.stopPropagation()
    },
    div() {
      console.log("div 被点了");
    },
  },
};
</script>

<style>
</style>